$(function () {
  // 1- 历史记录动态渲染 
  // 2- 清空历史记录  
  // 3- 删除一条历史记录
  // 4- 点击搜索按钮，添加一条历史记录  


  // 0 - 假数据 
  // var arr = ["耐克", "李宁", "新百伦", "耐克王", "阿迪王"];
  // localStorage.setItem('search', JSON.stringify(arr));

  // 1- 历史记录动态渲染 
  // 去本地去数据  + 模板渲染 
  function render () {
    var arr = JSON.parse(localStorage.getItem('search')) || [];
    var obj = {
      list: arr
    }
    // 渲染 
    $('.search-content').html(template('tmp', obj));
  }

  render();

  // 2- 清空历史记录  
  // 1-点击清空历史按钮，先弹出确认框， 
  // 2-如果确定删除，就去本地 删除search对应的数据
  // 3-删除完成后，页面要重新渲染  
  // 确认框的语法 
  // mui.confirm(提示消息，标题 ， 按钮组， 回调函数)
  // y用事件委托来绑定事件 
  $('.search-content').on('click', '.his-clear', function () {
    // $('.his-clear').click(function () {
    // 弹出确认框 
    mui.confirm('确定要清空吗？', '警告', ['在想想', '狠心清空'], function (e) {
      console.log(e); // e.index 是被点击按钮 索引 
      if (e.index == 1) {
        // 删除search对应的数据 
        localStorage.removeItem('search');
        // 重新渲染 
        render();
      }
    })
  })

  // 3 - 删除一条历史记录
  // 1 - 点击删除按钮，获取当前数据下标 ， 弹出确认框
  // 2 - 如果确定删除，根据id删除对应的数据
  //        数据已经字符串的形式 永久存储，以数组形态进行操作
  // 1 - 先取出json字符串，转成数组
  // 2 - 从数组中进行删除
  // 3 - 从数组中删除后，在把数组转回字符串，存回会到本地
  // 3 - 删除完成后，页面重新渲染

  $('.search-content').on('click', '.his-del', function () {
    // 获取当前数据下标
    var index = $(this).data('index');
    console.log(index);
    // 弹出确认框
    mui.confirm('确定要删除吗？', '警告', ['取消', '确定'], function (e) {
      if (e.index == 1) {
        //删除数据 
        // 1 - 先取出json字符串，转成数组
        var arr = JSON.parse(localStorage.getItem('search'));
        // 2 - 从数组中进行删除 arr.splice(从哪删， 删几个， 替换项);
        arr.splice(index, 1);
        // 3 - 从数组中删除后，在把数组转回字符串，存回会到本地
        localStorage.setItem('search', JSON.stringify(arr));
        // 重新渲染
        render();
      }
    })

  })

  // 4- 添加历史记录 
  // 1-点击搜索按钮，获取输入框的值，判断是否为空，为空提示错误，到此结束 
  // 2-如果数据不为空， 将输入的内容添加到 本地（向数组的最前面添加）
  //    数据已经字符串的形式 永久存储，以数组形态进行操作
  //     1- 先取出json字符串，转成数组 
  //     2- 向数组中进行添加 
  //     3- 从数组中添加后，在把数组转回字符串，存回会到本地 
  // 3-页面重新渲染 

  // 注意点： 
  //   1-历史记录值保留最近的6条 
  //   2-历史记录中不能有重项 
  $('.search-btn').click(function () {
    // 获取输入框的值
    var txt = $('.search-txt').val();
    // 判断是否为空
    if (txt.trim().length == 0) {
      // 提示错误
      mui.toast('请输入关键字');
      return;
    }
    // 添加
    // 1- 先取出json字符串，转成数组 
    var arr = JSON.parse(localStorage.getItem('search')) || [];
    // 去重： 在新记录添加之前，先查找本地是否有重复项，如果有先删除重复项，在添加新记录
    // arr.indexOf(b), 查找b在数组中的下标，如果找到返回下标，找不到返回-1 
    var index = arr.indexOf(txt);
    if (index > -1) {
      // 如果有先删除重复项，在添加新记录
      arr.splice(index, 1);
    }

    // 2- 向数组中进行添加 
    arr.unshift(txt);
    // 在添加了新的历史记录后，判断数组长度是否越界（超过6条）如果超过，删除最后一条
    if (arr.length > 6) {
      arr.pop();
    }
    // 3- 从数组中添加后，在把数组转回字符串，存回会到本地 
    localStorage.setItem('search', JSON.stringify(arr));

    // 重新渲染
    render();
    // 清空输入框 
    $('.search-txt').val('');

    // 跳转到搜索列表页 搜索对应商品
    location.href = './searchList.html?key=' + txt;
  })






})